<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.message {
		width: 100%;
		background-color: $main-bgc-gray;
		min-height: 100%;
		font-size: 1.2rem;
		overflow-y: scroll;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		bottom: 0;
		.list{
			padding: 1rem;
			$paddingSize:0.8rem;
			.item{
				padding-top: $paddingSize;
				background-color: white;
				margin-bottom: 1rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 0.8rem;
				.line1{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 $paddingSize;
					.line1Left{
						display: flex;
						align-items: center;
						position: relative;
						.type{
							font-size: 1.5rem;
							color: $color1;
						}
						.imgBox{
							width:2rem;
							position: relative;
							.dot{
								width: 4px;
								height: 4px;
								background-color: red;
								border: 1px solid white;
								position: absolute;
								top: 0px;
								right: 0px;
								border-radius: 3px;
							}
						}
					}
					.line1Right{
						&.time{
							color: $color3;
						}
					}
				}
				.line2{
					&.title{
						color:$color2;
						padding: $paddingSize;
						line-height: 1.3em;
						font-size: 1.3rem;
					}
				}
				.line3{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color:$color2;
					border-top: 1px solid $border-c;
					padding: $paddingSize;
				}
			}
		}
	}
</style>
<template>
	<div class="message">
		<van-tabs v-model="active" @click="onClickTabs" sticky line-width="100" title-active-color="#335FFC" color="#335FFC">
			<!-- :dot="tabList[index].dot" -->
			<van-tab v-for="(item,index) in tabList" :key="item.id" :title="item.name" sticky :dot="tabList[index].dot">
				<van-list v-model="load[active].loading" :finished="load[active].finished" finished-text="没有更多了" offset="100">
				  <div class="list" v-if="messageList[active]&&messageList[active].length>0">
					<div class="item" v-for="item in messageList[active]" :key="item.id">
						<div class="line1">
							<div class="line1Left">
								<span class="imgBox">
									<img v-if="item.offline_name=='线下课程'" src="../../assets/img/message4xx.svg">
									<img v-else-if="item.offline_name=='线上课程'" src="../../assets/img/message4zx.svg">
									<img v-else src="../../assets/img/message4xt.svg">
									<span class="dot" v-if="item.status==1"></span>
								</span>
								<span class="margL-m type">{{item.type_name||item.typename||item.offlinename}}</span>
							</div>
							<div class="line1Right time">{{item.createtime}}</div>
						</div>
						<div class="line2 title" v-html="item.content"></div>
						<div class="line3" @click="toDetail(item)">
							<span>查看详情</span>
							<van-icon name="arrow" class="icon" color="#999" size="1.6rem"/>
						</div>
					</div>
				  </div>
				  <div class="tabbar-height"></div>
				</van-list>
			</van-tab>
		</van-tabs>	
		<div class="tabbar-height"></div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "message",
		mixins: [myMixins],
		components: {},
		data() {
			return {
				active: 0,
				mainColor: "#FF0000",
				tabList: [{
					id: 0,
					name: "全部",
					dot: false
				}, {
					id: 1,
					name: "课程消息",
					dot: false
				}, {
					id: 2,
					name: "系统消息",
					dot: false
				}],
				messageList: [],
				load:[{
					loading: false,
					finished: false,
					pageNo: 1,
				},{
					loading: false,
					finished: false,
					pageNo: 1,
				},{
					loading: false,
					finished: false,
					pageNo: 1,
				}],
				pageSize: 50,
				userInfo:'',
				type_id:'',
				messageInfo:''
			}
		},
		created() {
			const _this = this;
			this.messageList[this.active] = []
			// this.getCode()
		},
		mounted() {
			// document.title = '活动管理'
			// this.messageList = this.$store.state.messageList
			this.NewsAppletsPage()
		},
		methods: {
			//修改消息是否已读
			NewDetails(id) {
				const _this = this;
				let params = {
					id:id,
					// id: this.$route.params.id,
					openid: _this.$store.state.openid || localStorage.getItem('openid'),
					campus:JSON.parse(localStorage.getItem('selectedCampus')).id
				}
				_this.$request.NewsAppletsUpdatenews(params).then(res => {
				})
			},
			toDetail(item) {
				console.log(item)
				//offline
				this.NewDetails(item.id)
				if(item.types==1){
					this.$router.push(`/course/detail4xs?id=${item.course_id}&type=${item.types}`)
				}else{
					this.$router.push(`/course/detail4xx?id=${item.course_id}&type=${item.types}`)
				}
				
				// if(item.offline==2){
				// 	this.$router.push(`/course/detail4xx?id=${item.course_id}&type=${item.offline}`)
				// }else{
				// 	this.$router.push(`/course/detail4xs?id=${item.course_id}&type=${item.offline}`)
				// }
			},
			onClickLabels(index) {
				this.activeLabel = index
				console.log("onClickLabels", index)
			},
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					this.type_id = ''
				} else if (index == 1) {
					//课程消息
					this.type_id = 2
				} else if (index == 2) {
					//系统消息
					this.type_id = 1
				}
				this.messageList[this.active] = []
				this.NewsAppletsPage()
			},
			NewsAppletsPage() {
				const _this = this;
				let params = {
					campus_id:JSON.parse(localStorage.getItem('selectedCampus')).id,
					type_id:this.type_id,
					openid: this.$store.state.openid || localStorage.getItem('openid'),
					pageNo: _this.load[_this.active].pageNo,
					pageSize: _this.pageSize
				}
				_this.$request.NewsAppletsPage(params).then(res => {
					let data = res.data.data
					this.messageInfo = res.data
					console.log("this.messageInfo",this.messageInfo)
					if(this.messageInfo.sys_message==1){
						console.log("this.messageInfo.sys_message==1",this.messageInfo.sys_message==1)
						this.tabList[2].dot = true
					}
					if(this.messageInfo.course_message==1){
						console.log("this.messageInfo.course_message==1",this.messageInfo.course_message==1)
						this.tabList[1].dot = true
					}
					if(this.messageInfo.whole_message==1){
						console.log("this.messageInfo.whole_message==1",this.messageInfo.whole_message==1)
						this.tabList[0].dot = true
					}
					console.log("this.tabList",this.tabList)
					console.log("res",res)
					let list = _this.messageList[_this.active]
					list.push(...data)
					_this.messageList[_this.active] = list
					_this.$forceUpdate()
					console.log("_this.messageList",_this.messageList)
					if (_this.load[_this.active].pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.load[_this.active].finished = true;
					} else {
						_this.load[_this.active].pageNo++
					}
				}).finally(() => {
					console.log('finally')
				})
			},
		}
	};
</script>
